/*markdown 浏览*/
(function ($) {
    $.fn.yqMDView = function (opts, param) {
        if (typeof opts == 'string') {
            return $.fn.yqMDView.methods[opts](this, param);
        }

        return this.each(function () {
            $this = $(this);
            var opt;
            if ($this.data("yqtype") == "yqMDView") {
                opt = $.extend(options($this), opts);
            }
            else {
                opt = $.extend({}, $.fn.yqMDView.defaults, opts);
                var $uniqueID = $this.attr("ID");
                if ($uniqueID === undefined || $uniqueID === null || $uniqueID == "") {
                    $uniqueID = $.getUniqueID();
                    $this.attr("ID", $uniqueID);
                }
            }

            if (opt.width === undefined && $this.width() > 0) {
                opt.width = $this.width();
            }
            else if (typeof opt.width != "undefined") {
                $this.width(opt.width);
            }

            if (opt.height === undefined && $this.height() > 0) {
                opt.height = $this.height();
            }
            else if (typeof opt.height != "undefined") {
                $this.height(opt.height);
            }

            //变量信息
            $this.data("mdview_opt", opt);
            $this.data("yqtype", "yqMDView");
            LoadJsCss($this, function () {
                init_ui($this);
            });
        });
    };

    $.fn.yqMDView.defaults = {
        value: "hello md.",
    };

    $.fn.yqMDView.methods = {
        options: function (jq) {
            return options($(jq[0]));
        },
        setValue: function (jq, value) {   //{"ui_type":2,"value":""}
            setValue($(jq[0]), value);
        },
        clear: function (jq) {   //{"ui_type":2,"value":""}
            setValue($(jq[0]), "");
        },
        resize: function (jq, params) {   //{"ui_type":2,"value":""}
            resize($(jq[0]), params);
        },
        destroy: function (jq) {   //{"ui_type":2,"value":""}
            destroy($(jq[0]));
        },
    };

    function options($object) {
        return $object.data("mdview_opt");
    }

    function LoadJsCss($object, callback) {
        var opt = options($object);

        var file = [];
        file.push({ url: "/scripts/editor.md/examples/css/style.css", type: "css" });
        file.push({ url: "/scripts/editor.md/css/editormd.preview.css", type: "css" });

        file.push({ url: "/scripts/editor.md/lib/marked.min.js", type: "js" });
        file.push({ url: "/scripts/editor.md/lib/prettify.min.js", type: "js" });
        file.push({ url: "/scripts/editor.md/lib/raphael.min.js", type: "js" });
        file.push({ url: "/scripts/editor.md/lib/underscore.min.js", type: "js" });
        file.push({ url: "/scripts/editor.md/lib/sequence-diagram.min.js", type: "js" });
        file.push({ url: "/scripts/editor.md/lib/flowchart.min.js", type: "js" });
        file.push({ url: "/scripts/editor.md/lib/jquery.flowchart.min.js", type: "js" });
        file.push({ url: "/scripts/editor.md/editormd.js", type: "js" });

        $.yqLoadJsCss(file, function () {
            callback();
        })
    }


    function init_ui($object) {
        var opt = options($object);
        var $uniqueID = $object.attr("id");

        var l_width = opt.width * 0.4;
        if (l_width > 300) {
            l_width = 300;
        }
        if (l_width < 50) {
            l_width = 50;
        }


        var h_ = `
<a id="`+ $uniqueID + `_show" href="javascript:void(0);">
    <i class="fa fa-step-backward"></i>
</a>
<div id="`+ $uniqueID + `_sidebar">
    <div class="markdown-body editormd-preview-container" id="`+ $uniqueID + `_container">#` + $uniqueID + `_container</div>
</div>
<div id="`+ $uniqueID + `_view">
    <textarea "`+ $uniqueID + `_view_" style="display:none;">###Hello world!</textarea>
</div>
<div id="`+ $uniqueID + `_view2">
    <textarea id="`+ $uniqueID + `_view2_" style="display:none;"></textarea>
</div>`;

        $object.empty();
        $object.append(h_);

        h_css = `
   
      
#`+ $uniqueID + `_sidebar {
    width: `+ l_width + `px;
    height:100%;
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
    background: #fff;
    z-index: 100;
    padding: 5px 5px 5px 0px;
    border: 1px solid #ddd;
    border-top: none;
    border-bottom: none;
}

#`+ $uniqueID + `_sidebar:hover {
    overflow: auto;
}

#`+ $uniqueID + `_sidebar h1 {
    font-size: 16px;
}

#`+ $uniqueID + `_show {
    position: absolute;
    z-index: 101;
    left: `+ (l_width - 20) + `px;
}

#`+ $uniqueID + `_container {
    padding: 0px;
}

#`+ $uniqueID + `_view{
    padding-top: 5px;
    padding-right: 5px;
    padding-left: `+ (l_width + 5) + `px;
    margin: 0;
    height:`+ opt.height + `px;
}

#`+ $uniqueID + `_view2 {
    padding-top: 0;
    padding-right: 0;
    padding-left: `+ l_width + `px;
    margin: 0;

}
`;
        $.yqAddCSS(h_css, $uniqueID + "_css");

        opt.view = editormd.markdownToHTML($uniqueID + "_view", {
            markdown: opt.value,
            htmlDecode: "style,script,iframe",  // you can filter tags decode
            tocm: true,    // Using [TOCM]
            tocContainer: "#" + $uniqueID + "_container", // 自定义 ToC 容器层
            //emoji: true,
            taskList: true,
            tex: true,  // 默认不解析
            flowChart: true,  // 默认不解析
            sequenceDiagram: true,  // 默认不解析
        });

        opt.view2 = editormd.markdownToHTML($uniqueID + "_view2", {
            htmlDecode: "style,script,iframe",  // you can filter tags decode
            emoji: true,
            taskList: true,
            tex: true,  // 默认不解析
            flowChart: true,  // 默认不解析
            sequenceDiagram: true,  // 默认不解析
        });

        $("#" + $uniqueID + "_show").bind("click", function () {
            var l_width = opt.width * 0.4;
            if (l_width > 300) {
                l_width = 300;
            }
            if (l_width < 50) {
                l_width = 50;
            }

            if ($("#" + $uniqueID + "_sidebar").is(":hidden")) {
                $("#" + $uniqueID + "_sidebar").show();
                $("#" + $uniqueID + "_show").find("i").attr("class","fa fa-step-backward");
            } else {
                $("#" + $uniqueID + "_sidebar").hide();
                $("#" + $uniqueID + "_show").find("i").attr("class","fa fa-step-forward");
            }
            resize($object);
        });
    }

    function resize($object, params) {
        var opt = options($object);
        if (typeof params == "object") {
            opt.width = params.width;
            opt.height = params.height;
        }
        var $uniqueID = $object.attr("id");
        $('#' + $uniqueID).css({
            "width": opt.width,
            "height": opt.height,
            "margin": "0px"
        });

        var l_width = opt.width * 0.4;
        if (l_width > 300) {
            l_width = 300;
        }
        if (l_width < 50) {
            l_width = 50;
        }

        if ($("#" + $uniqueID + "_sidebar").is(":hidden")) {
            $("#" + $uniqueID + "_view").css({
                "padding-top": "20px",
                "padding-left": "5px"
            });
            $("#" + $uniqueID + "_view2").css({
                "padding-left": "0px"
            });

            $("#" + $uniqueID + "_show").css({
                "left": "10px"
            });

        } else {
            $("#" + $uniqueID + "_view").css({
                "padding-top": "5px",
                "padding-left": (l_width + 5) + "px"
            });
            $("#" + $uniqueID + "_view2").css({
                "padding-left": l_width + "px"
            });

            $("#" + $uniqueID + "_show").css({
                "left": (l_width - 20) + "px"
            });
        }
    }

    function destroy($object) {
        var opt = options($object);

        $object.removeData("mdview_opt");
        $object.removeData("yqtype");

        $object.empty();
    }

    function setValue($object, value) {
        var opt = options($object);
        if (value === undefined || value === null) {
            value = "readme";
        }
        opt.value = value;

        init_ui($object);
    }

})(jQuery);